<template>
  <div class='meal first-box'>
    <div class="tab-box">
      <Tab :listData="tabData" :selected="selectedIndex" :className="{'padding30':true}"></Tab>
    </div>

     <Scroll :hasmore="hasmore" :pullup="pullup" setHeight="-55">
      <List :listData="listData"></List>
    </Scroll>
  </div>
</template>
<script>
import Tab from '../../common/tab'
import Scroll from '../../common/scroller'
import List from './common/list'
export default {
  components: {Tab,Scroll,List},
  name: "",
  data() {
    return {
      tabData:[
        {
          name:"全部套餐",
          click:this.changeTab,
          type:0,
        },{
          name:"已使用",
          click:this.changeTab,
          type:1,
        },{
          name:"待评价",
          click:this.changeTab,
          type:2,
        },{
          name:"已过期",
          click:this.changeTab,
          type:3,
        }
      ],

      selectedIndex:0,

      pageInfo:{
        page:1
      },

      listData:[
        {
          id:1,
          img:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1728906391,183129097&fm=173&app=25&f=JPEG?w=218&h=146&s=5E2287455432619EC8AC80FD030080A1",
          title:"五20活动大礼包",
          endtime:"2018-5-20",
          state:2,//1使用中,2已过期,3待评价
        },{
          id:1,
          img:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1728906391,183129097&fm=173&app=25&f=JPEG?w=218&h=146&s=5E2287455432619EC8AC80FD030080A1",
          title:"五20活动大礼包",
          endtime:"2018-5-20",
          state:1,//1使用中,2已过期,3待评价
        },{
          id:1,
          img:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1728906391,183129097&fm=173&app=25&f=JPEG?w=218&h=146&s=5E2287455432619EC8AC80FD030080A1",
          title:"五20活动大礼包",
          endtime:"2018-5-20",
          state:3,//1使用中,2已过期,3待评价
        }
      ],

      hasmore:false,
    };
  },
  methods: {
    changeTab(item){
      this.selectedIndex=item.type
      console.log("click---tab--change",item)
      this.pageInfo.page=1
      this.listData=[]

      this.getList()
    },

    // 下拉刷新方法回调
    pullup(func){
      if(this.hasmore){
        this.pageInfo.page++
         _g.orderList([this.getList,func])
         return
      }
    },
    getList(){
      var params={
        currentPage:this.pageInfo.page,
        state:this.selectedIndex
      }
      _g.apiPost("vipPackages/selectAll.do",params).then(res=>{
        var goal=[]
        res.data.list.forEach(ele => {
            goal.push({
              id:ele.id,
              img:ele.picture||"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1728906391,183129097&fm=173&app=25&f=JPEG?w=218&h=146&s=5E2287455432619EC8AC80FD030080A1",
              title:ele.commodityName||"五20活动",
              endtime:ele.endTime||"直到永远",
              state:ele.status
            })
        });
        this.$set(this,"listData",this.listData.concat(goal))
      })
    }
  },
  created() {
    this.changeTab(this.tabData[this.selectedIndex])
  }
};
</script>
<style lang="scss" scoped>
.meal {
  .tab-box{
    background-color: #f2f2f2;
    padding-bottom: 5px;
  }
  .padding30{
    padding-left: 30px;
    padding-right: 30px;
  }
}
</style>